<template>
  <view class="index">
    <!-- 1 顶部搜索框 -->
    <ugo-search></ugo-search>
    <!-- 1 顶部搜索框 -->

    <!-- 2 轮播图 -->
    <u-swiper
      :list="swiperList"
      name="image_src"
      height="340"
      border-radius="0"
    ></u-swiper>
    <!-- 2 轮播图 -->

    <!-- 3 导航 -->
    <view class="nav u-flex">
      <navigator
        class="u-flex-1 u-p-15"
        v-for="item in navList"
        :key="item.name"
      >
        <u-image
          mode="widthFix"
          :src="item.image_src"
        ></u-image>
      </navigator>
    </view>
    <!-- 3 导航 -->

    <!-- 4 楼层 -->
    <view class="floor">
      <view
        class="floor-group u-m-t-10"
        v-for="item1 in floorList"
        :key="item1.floor_title.name"
      >
        <!-- 标题 -->
        <view class="floor-group-title">
          <u-image
            mode="widthFix"
            :src="item1.floor_title.image_src"
          ></u-image>
        </view>
        <!-- 内容 -->
        <view class="floor-group-content">
          <navigator
            v-for="item2 in item1.product_list"
            :key="item2.name"
          >
            <u-image
              :src="item2.image_src"
              mode="scaleToFill"
              width="100%"
              height="100%"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 4 楼层 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数组
      swiperList: [],
      // 导航数据
      navList: [],
      // 楼层
      floorList: [],
    };
  },
  onLoad() {
    // 获取轮播图数据
    this.getSwiper();
    // 获取导航数据
    this.getNav();
    // 获取楼层数据
    this.getFloor();
  },
  methods: {
    // 获取轮播图数据
    async getSwiper() {
      this.swiperList = await this.$u.http.get("/home/swiperdata");
    },
    // 获取导航数据
    async getNav() {
      this.navList = await this.$u.http.get("/home/catitems");
    },
    // 获取楼层数据
    async getFloor() {
      this.floorList = await this.$u.http.get("/home/floordata");
    },
  },
};
</script>

<style lang="scss">
.floor {
  .floor-group-content {
    /* 清除浮动 */
    overflow: hidden;
    navigator {
      float: left;
      background-color: yellow;
      margin-left: 13rpx;
    }
    /* 第一个导航标签 设置 232 * 386 */
    navigator:first-child {
      width: 232rpx;
      height: 386rpx;
    }

    /* 后四个导航标签 */
    navigator:nth-last-child(-n + 4) {
      width: 233rpx;
      height: 188rpx;
    }
    /* 后2个导航标签 */
    navigator:nth-last-child(-n + 2) {
      margin-top: 10rpx;
    }
  }
}
</style>